<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml" lang="en"
>
<head>
    <title>咕噜橙</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" type="image/x-icon" href="https://xzio.oss-cn-beijing.aliyuncs.com/static/img/logo.jpg">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/plugs_paging.css">
    <link rel="stylesheet" href="css/audio.css">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <!--[if lte IE 8]>
    <script src="assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="assets/css/main.css"/>
    <link rel="stylesheet" href="assets/css/xc.css"/>
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="assets/css/ie9.css"/><![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ie8.css"/><![endif]-->
    <!--滚动样式-->
    <style>

        .modal-content {
            top: 100px !important;
        }
        .send-btn {
            margin-left: 60px;
        }
        #conts p{
            display:inline-block;
            padding:3px 0px 3px 0px;
            margin:0px;
        }

        .dm .d_screen
        .d_del{width:38px;height:38px;background:#600;display:block;text-align:center;line-height:38px;
            text-decoration:none;font-size:20px;color:#fff;border-radius:19px;border:1px solid #fff;position:absolute;top:10px;right:20px;z-index:3;display:none;}
        .dm .d_screen .d_del:hover{background:#f00;}
        .dm .d_screen .d_mask{width:255px;height:200px;position:absolute;top:0;left:0;opacity:0.5;
            filter:alpha(opacity=50) ;z-index:1;}
        .dm .d_screen .d_show{position: relative;z-index:2;}
        .dm .d_screen .d_show div{color:#fff; background:rgba(1,1,1,.4);border-radius:5px; margin:5px; width: initial}
        #showmeg p{
            font-weight:bold;
            text-align:center;
        }
        .d_show div{
            width:230px;font-size:12px;color:#fff; line-height:20px;
        }
        .d_show img{width:20px; height:20px;border-radius:50%; padding:2px;}
        .d_show p{
            text-overflow:ellipsis	;
        }

        .NYwishes{ position:sticky; bottom:0; right:0; background:rgba(0,0,0,.6);}
        .NYwishes h2{ margin:5px 0; font-family:"微软雅黑"; font-size:18px; text-align:center; color:#fff;}
        .NYwishes .swiper-container{ height:250px;}
        #conts{margin:0 auto ;padding-left:2%;padding-right:2%;height:280px;}
        .NYwishes .send{position: relative;left:0%;bottom:0px;height:40px;width:100%;z-index:99999;}
        .NYwishes .send .input{width:155px;;float:left;margin-left:5%;}
        .NYwishes .send-btn a{background-color: #0e8fd1;color:#fff;width:221px;height:30px;display: inline-block;text-align: center;line-height:30px;cursor:pointer; border-radius:20px  20px 20px 20px;text-decoration:none;}
        .xc-content{
            margin-left: 30px;
            margin-top: -25px;
            width: initial;
            word-wrap: break-word;word-break: break-all;overflow: hidden;
        }
        .xc-hr{
            width: 100%;
            margin-top: 5px;
            border: none;
            border-top: 2px solid #0e8fd1;
            height: 0;
            margin-left: 5px;
            margin-right: 5px;
            z-index: 0;
        }
        .myInfo{
            position: absolute;
            margin-top: 47px;
            margin-left: 125px;
            display: none;
            z-index: 2;
        }
        .xc-infoImg{
            width: 176px;
        }
    </style>
</head>
<body>
<!--QQ二维码-->
<div class="myInfo" id="qqInfo">
    <img src="images/qq.jpg" class="xc-infoImg">
</div>
<!--微信二维码-->
<div class="myInfo" id="weChatInfo">
    <img src="images/weChat.jpg" class="xc-infoImg">
</div>
<!--微博二维码-->
<div class="myInfo" id="weiboInfo">
    <img src="images/weibo.jpg" class="xc-infoImg">
</div>
<!-- Wrapper -->
<div id="wrapper">

    <!-- Header -->
    <header id="header">
        <a class="headChange" href="/index"><h1>Xzio</h1></a>
        <nav class="links">
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/article">文章</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="/leaveMessage">留言板</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
        <div class="am-topbar-right" th:if="${#httpServletRequest.remoteUser}">
            <!--<a class="image" href="/user"><img src="images/qq.jpg" style="max-height: 42px;border-radius: 100%;position: absolute;right: 12px;top: -28px;"></a>-->
        </div>

        <nav class="main" id="xc-user">

            <ul>
                <li class="search">
                    <a class="fa-angle-double-left" href="#search">Search</a>
                    <form id="search" method="get" action="/editor">
                        <input type="submit" class="xc-button" value="写文章">
                    </form>
                </li>
                <li class="menu">
                    <a class="fa-bars" href="#menu">Menu</a>
                </li>
            </ul>
        </nav>

    </header>

    <!-- Menu -->
    <section id="menu">
        <!-- Actions -->
        <section>
            <ul class="actions vertical">
                <li><a href="/login" class="button big fit">这里有个入口</a></li>
            </ul>
        </section>

        <!-- Links -->
        <section>
            <ul class="links">
                <li>
                    <a href="/article">
                        <h3>有那么一个故事</h3>
                        <p>欢乐 悲伤 不曾记</p>
                    </a>
                </li>
                <li>
                    <a href="/leaveMessage">
                        <h3>有那么一句话</h3>
                        <p>豪放 温情 言吾志</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <h3>有那么一首歌</h3>
                        <p>婉转 清妙 缘吾情</p>
                    </a>
                </li>
                <li>
                    <a href="/about">
                        <h3>有那么一个人</h3>
                        <p>乘风 逐月 求不得</p>
                    </a>
                </li>
            </ul>
        </section>


    </section>

    <!--播放器-->
    <div class="xc-musicPlayer" style="position: fixed;z-index: 1">
        <center class="bo1" style="margin-right: -40px;float: right;width: 70%;">
            <div id="player">
                <div class="cover" style="height:132px;"></div>
                <div class="ctrl">
                    <div class="tag"> <strong>Title</strong> <span class="artist">Artist</span> <span class="album">Album</span> </div>
                    <div class="control">
                        <div class="left">
                            <div class="rewind icon"></div>
                            <div class="playback icon"></div>
                            <div class="fastforward icon"></div>
                        </div>
                        <div class="volume right">
                            <div class="mute icon left"></div>
                            <div class="slider left">
                                <div class="pace"></div>
                            </div>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="slider">
                            <div class="loaded"></div>
                            <div class="pace"></div>
                        </div>
                        <div class="timer left">0:00</div>
                        <div class="right">
                            <div class="repeat icon"></div>
                            <div class="shuffle icon"></div>
                        </div>
                    </div>
                </div>
            </div>
            <ul id="playlist" class="uicss-cn">
                <span style="width: 100%;height: 7px;display: block;"></span>
            </ul>
        </center>
    </div>

    <!-- article -->
    <div id="main" style="margin-left: -50px;margin-right: 370px;">
        <div >
            <ul id="insert">
            </ul>
        </div>
        <div id="pagination">
            <ul class="am-pagination  am-pagination-centered">
                <li class="am-disabled"><a href="#">&laquo; 上一页</a></li>
                <li class="am-active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">下一页 &raquo;</a></li>
            </ul>
        </div>

        <div id="totalVolume" style="font-size: x-large; display: flex;justify-content: center;align-items: center;">
            <span style="display: inline;" >您是第<span class="foot-count" id="person_num"></span>次来访哦</span>
        </div>
        <div  style="font-size: x-large; display: flex;justify-content: center;align-items: center;">
            <span style="display: inline;" >本站总访问量<span class="foot-count" id="totalVolume_num"></span>次</span>
        </div>
        <div  style="font-size: x-large; display: flex;justify-content: center;align-items: center;">
            <span style="display: inline;">访客数<span class="foot-count" id="totalVisitor_num"></span>人次</span>
        </div>
        <div style="display: flex; justify-content: center; align-items: center;">
            <div style="font-size: x-large">本站运行时间: </div>
        <span id="timeid1" style="font-size:35px">
        </span>

            <div style="margin-top: 10px;">days</div>
            <span id="timeid2" style="font-size:35px">
        </span>

            <div style="margin-top: 10px;">hours</div>
            <span id="timeid3" style="font-size:35px">
        </span>

            <div style="margin-top: 10px;">min</div>
            <span id="timeid4" style="font-size:35px">
        </span>

            <div style="margin-top: 10px;">sec</div>

        </div>



    </div>

    <!-- right -->
    <section id="sidebar" style="margin-left: -20px;">
        <!-- Intro -->
        <section id="intro">
            <center>
                <a href="#" class="image"><img src="https://xzio.oss-cn-beijing.aliyuncs.com/static/img/logo.jpg" alt=""
                                               style="width: 200px;"/></a>
                <header>
                    <h2>咕噜橙</h2>
                    <p>醉舞映昔颜，青衫衬旧人</p>
                    <p>漫袖扬飞笛，氤氲枕吾眠</p>
                    <ul class="icons">
                        <li><a href="#" class="fa-qq" onmouseover="showQQ()" onmouseout="showQQ()"><span
                                class="label">qq</span></a></li>
                        <li><a href="#" class="fa-wechat" onmouseout="showWeChat()" onmouseover="showWeChat()"><span
                                class="label">wechat</span></a></li>
                        <li><a href="#" class="fa-weibo" onmouseover="showWeibo()" onmouseout="showWeibo()"><span
                                class="label">weibo</span></a></li>
                        <li><a href="#" class="fa-rss"><span class="label">RSS</span></a></li>
                        <li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
                    </ul>
                </header>
            </center>
        </section>
        <!-- record-->
        <article class="mini-post">
            <header>
                <p align="center">时间是旅途</p>
                <p align="center">记录是成长</p>
                <p align="center">还在路上...</p>
                <hr>
                <time class="published" datetime="2018-12-23">December 23, 2018</time>
                <p>正式上线</p>
                <time class="published" datetime="2019-1-17">January 17, 2019</time>
                <p>增添了用户简单资料界面</p>
                <time class="published" datetime="2019-1-19">January 19, 2019</time>
                <p>取消了QQ登陆，改用酷炫的手机验证码登陆</p>
                <time class="published" datetime="2019-3-19">march 19, 2019</time>
                <p>对留言进行分页，增加文章评论功能</p>
                <time class="published" datetime="2019-3-28">march 28, 2019</time>
                <p>增加音乐播放并对主页面进行优化</p>
            </header>
            <a href="#" class="image"><img src="https://xzio.oss-cn-beijing.aliyuncs.com/static/img/pic07.jpg" alt=""/></a>
        </article>
        <!-- mini Post -->
        <section class="blurb">
            <div class="NYwishes">
                <h2>MiNi留言墙</h2>
                <div class="swiper-container">
                    <div id="conts">
                        <div class="dm">

                            <div class="d_screen">
                                <div class="d_mask"></div>
                                <div class="d_show">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="send">

                    <div class="send-btn">
                        <a href="/leaveMessage">查看所有留言</a>
                    </div>
                </div>
            </div>
            <ul class="actions">
                <li><a href="/superAdmin" class="button" style="margin-left: 120px;margin-top: 20px;">这是个按钮</a></li>
            </ul>
        </section>



    </section>

</div>
<footer class="site-footer">
    <div class="container">
        <div class="row"style="font-size: xx-large;display: flex;justify-content: center;align-items: center;margin-top: -66px;color: #727472">
            <hr class="xc-hr">

            <p style=" margin-top: -50px;">&copy;2018&nbsp;-&nbsp;咕噜橙|<a href="http://http://www.miitbeian.gov.cn/" target="_blank" style="color: #727472;">蜀ICP备18023001号-1</a>
            </p>




        </div>
    </div>



</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]>
<script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script src="js/index.js"></script>
<script src="js/plugs_paging.js"></script>
<!--留言滚动-->
<script src="js/wish/wish.js"></script>
<!--计时-->
<script src="js/function.js"></script>
<!--播放器-->
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/audio.js"></script>
</body>
</html>